<template>
	<view class="person_bank_revise">
		<view class="main">
			
			 
				<u-form labelWidth="200rpx">
					
					<u-form-item label="办理套餐">
						 <u-input v-model="goodsName" disabled type="text" :clearable="false" />
					</u-form-item>
					<u-form-item label="办理人姓名">
						<u-input v-model="formData.shipping_contact" type="text" :clearable="false" placeholder="请输入办理人姓名" />
					</u-form-item>
					
					<u-form-item label="办理人电话">
						<u-input v-model="formData.shipping_phone" type="number" maxlength="11" :clearable="false" placeholder="请输入办理人电话" />
					</u-form-item>
					
					<u-form-item label="办理人身份证">
						 <u-input v-model="formData.shipping_idcard" type="text" maxlength="18" :clearable="false" placeholder="请输入办理人身份证" />
					</u-form-item>
					
					<u-form-item label="办理人城市">
						 <u-input v-model="cityValue"  disabled :clearable="false" placeholder="请选择办理人城市"  type="select"  @click="showAddress" >
						
						 </u-input>
					</u-form-item>
					
					<!-- <u-form-item label="收货人地址" label-position="top">
						 <u-input v-model="formData.shipping_address" type="textarea" :clearable="false" placeholder="请输入街道/镇+小区/村/写字楼/市场等+门牌号" />
					</u-form-item> -->
					<u-form-item label="所属街道/乡镇">
						 <u-input v-model="formData.street" type="text" :clearable="false" placeholder="请输入街道/镇" />
					</u-form-item>
					<u-form-item label="所属小区">
						 <u-input v-model="formData.plot" type="text" :clearable="false" placeholder="仅输入小区/村/等名称的全称" />
					</u-form-item>
					<u-form-item label="门牌号">
						 <u-input v-model="formData.doorplate" type="text" :clearable="false" placeholder="请输入楼栋/门牌号(选填)" />
					</u-form-item>
				</u-form>
		 
			  
		
			
		</view>
		<!-- 底部 -->
		<BottomBtn title='提交订单' @submit='submitBtn' :bottombtn="100"></BottomBtn>
		
		<u-select v-model="show" mode="mutil-column-auto" :list="cityList" @confirm="confirmSelect"></u-select>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	
	import AreaSelect from "@/components/areaSelect.vue"
	import BottomBtn from '@/components/bottom_btn/bottom_btn.vue';
	export default {
		components:{
			BottomBtn,
			AreaSelect
		},
		data() {
			return {
				formData:{
					shipping_province: "",
					shipping_contact: "",
					shipping_phone: "",
					shipping_idcard: "",
					shipping_province: "",
					shipping_city: "",
					shipping_area: "",
					shipping_address: "",
					id: "",
					plot:"",
					doorplate:"",
					street:""
				},
				goodsName:"",
				cityValue: "",
				show: false,
				cityList: [],
			
							

			};
		},
		onLoad({id,name,agid}) {
			this.formData.id=id
			this.goodsName=name
			this.formData.agid=agid
			this.getCity()
		},
		methods:{
			
			confirmSelect(e) {
				console.log(e);
				let [p,c,a] = e 
				let str = ""
				if ( p ) {
					this.formData.shipping_province = p.label
					str += p.label
				}
				if ( c ) {
					this.formData.shipping_city = c.label
					str += "-" + c.label
				}
				if ( c ) {
					this.formData.shipping_area = a.label
					str += "-" + a.label
				}
				this.cityValue = str
			},
			
			// 获取省市县
			async getCity () {
				let res = await this.$httpApi.getCity({ id: this.formData.id })
				// console.log( res );
				if ( res.code  == 1 ) {
					this.cityList = this.matCity(res.data)
					console.log(this.cityList);
				} else if ( res.code == 0 ) {
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}
			},
			
			// 格式化省市区
			matCity( arr ) {
				if ( arr && arr.length ) {
					arr.forEach( el => {
						el.label = el.value
						if ( el.child && el.child.length ) {
							el.children = this.matCity( el.child )
						}
					})
				}
				return arr
			},
			
			//选择省市县
			showAddress() {
				this.show= true
			},
			
			// 底部按钮
			submitBtn(){
				var that = this
				that.$tips.showLoading('提交中')
				this.formData.shipping_address = this.formData.street + this.formData.plot + this.formData.doorplate
				that.$httpApi.createOrder(this.formData).then((res)=>{
					that.$tips.hideLoading()
					if(res.code==1){
						that.$tips.showToast('提交成功')
						setTimeout(function(){
							uni.navigateBack()
						},2000)
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.person_bank_revise{
		width: 100%;
		padding-top: 24rpx;
		.main{
			width: 100%;
			padding: 20rpx 32rpx;
			background: #fff;
			// .input{
			// 	width: 100%;
			// 	height: 100rpx;
			// 	display: flex;
			// 	align-items: center;
			// 	.left{
			// 		width: 200rpx;
			// 		font-size: 28rpx;
			// 		font-family: PingFang SC-Medium, PingFang SC;
			// 		font-weight: 500;
			// 		color: #222222;
			// 	}
			// 	.right{
			// 		width: calc(100% - 200rpx);
			// 		display: flex;
			// 		align-items: center;
			// 		u-input{
			// 			width: 100%;
			// 			font-size: 28rpx;
			// 			font-family: PingFang SC-Medium, PingFang SC;
			// 			font-weight: 500;
			// 			color: #222222;
			// 		}
			// 		.right_text{
			// 			width: 100%;
			// 			display: flex;
			// 			align-items: center;
			// 			justify-content: space-between;
			// 			.r_txt{
			// 				font-size: 28rpx;
			// 				font-weight: 500;
			// 				color: rgb(192, 196, 204);
			// 			}
			// 			.r_txt_color{
			// 				color: #222222;
			// 			}
			// 		}
			// 	}
			// 	.right_code{
			// 		width: calc(100% - 200rpx);
			// 		display: flex;
			// 		align-items: center;
			// 		justify-content: space-between;
			// 		u-input{
			// 			width: calc(100% - 160rpx);
			// 			font-size: 28rpx;
			// 			font-family: PingFang SC-Medium, PingFang SC;
			// 			font-weight: 500;
			// 			color: #222222;
			// 		}
			// 		text{
			// 			display: block;
			// 			width: 160rpx;
			// 			line-height: 70rpx;
			// 			text-align: center;
			// 			font-size: 28rpx;
			// 			font-family: PingFang SC-Regular, PingFang SC;
			// 			font-weight: 400;
			// 			color: #26C281;
			// 		}
			// 	}
			// }
		}
	}
</style>
